<template>
  <div class="user-avatar" :style="{ '--size': size + 'px' }">
    <span v-if="user.userIcon" class="user-avatar-icon">
      <img :src="user.userIcon" />
    </span>
    <span
      v-else-if="user.userAvatar"
      class="user-avatar-img"
      :style="{ backgroundImage: 'url(' + user.userAvatar + ')' }"
    ></span>
    <span v-else class="user-avatar-name">{{ user.userName && user.userName.slice(-2) }}</span>
  </div>
</template>

<script>
export default {
  props: {
    user: {
      type: Object,
      required: true,
    },
    size: {
      type: Number,
      default: 60,
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.user-avatar {
  display: inline-block;
  width: var(--size);
  height: var(--size);
  user-select: none;

  .user-avatar-name,
  .user-avatar-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #0058ff;
    border-radius: 6px;
    font-size: calc(var(--size) / 4);
    font-weight: 900;
  }

  .user-avatar-img {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
  }
}
</style>
